<template>
  <view class="wrapper">
    <Item :datalist="searchData" v-if="searchData.length" />
    <view v-else class="no-data">没有搜索到相关内容</view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import Item from '@/components/Item/list2v3.vue'
let timer = null
export default {
  data() {
    return {
      searchData: [],
      wd: ''
    }
  },
  onLoad() {},
  methods: {
    ...mapActions('list', ['getList']),
    getSearch(wd) {
      this.wd = wd
      this.getList({
        wd,
        id: 3
      }).then(res => {
        console.log(res)
        this.searchData = res.data
      })
    }
  },
  components: {
    Item
  },
  /**
   * 当 searchInput 输入时触发
   */
  onNavigationBarSearchInputChanged(e) {
    clearTimeout(timer)
    timer = setTimeout(() => {
      const text = e.text
      if (!text) {
        uni.showToast({
          title: '关键词不能为空',
          icon: 'none'
        })
        return
      } else {
        this.getSearch(text)
      }
    }, 500)
  },
  /**
   * 点击软键盘搜索按键触发
   */
  onNavigationBarSearchInputConfirmed(e) {
    let text = e.text
    if (!text) {
      uni.showToast({
        title: '关键词不能为空',
        icon: 'none'
      })
      return
    } else {
      this.getSearch(text)
    }
  },
  /**
   *  点击导航栏 buttons 时触发
   */
  onNavigationBarButtonTap() {
    uni.showModal({
      title: '提示',
      content: '点击确定，修改输入框的内容为abc',
      success: res => {
        if (res.confirm) {
          console.log('ok')
        }
      }
    })
  }
}
</script>

<style>
.no-data {
  text-align: center;
  color: #999;
  margin: 100rpx;
}
</style>
